<!-- 
*
* 标签
*
-->
<template>
    <div class="tags-container shadow-box">
        <div class="tags-title flx-align-center">
            <svgIcon iconName="icon-biaoqian"></svgIcon>
            <span>标签</span>
        </div>
        <ul class="tags-main">
            <li 
            class="flx-align-center" 
            :style="'background:'+ bgArrays[randomNum()] +';'" 
            v-for="item in tagList" 
            :key="item.id"
            @click="goPage(item)">{{ '# '+item.tagName+' #'}}</li>
        </ul>
    </div>
</template>

<script setup>
import { tagsApi } from '@/api/article/tags-api';
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import { useRouter } from 'vue-router';

const bgArrays = reactive(['#EA7586', '#EE8335', '#ffa500', '#ff4b2b', '#4FDAC1', '#409eff']);
function randomNum() {
    let result = Math.floor(Math.random() * (bgArrays.length - 0))+0;
    return result;
};

// ========================= 实列挂载之前调用 =========================
onBeforeMount(() => {
    getTagList();
});

// ========================= 实列挂载之后调用 =========================
onMounted(() => {
});

// ========================= 获取标签数据 =========================
const tagList = ref([]);
async function getTagList() {
    try {
        let params = {
            state: true
        }
        const res = await tagsApi.list(params);
        if(res.meta.status !== 200) throw new Error(res.meta.msg);
        tagList.value = res.data.data;
    } catch (e) {
        console.error(e)
    };
};

// ========================= 路由操作 =========================
const router = useRouter(); // 路由
function goPage(item) {
    router.push({
        path: '/article/tag',
        query: {
            id: item.id
        }
    })
};

</script>

<style lang="scss" scoped>
    @import './tags-sidebar.scss';
    @import '@/theme/animations.scss';
</style>

